<!-- <button class="btn btn-lg" ng-click="dependenteTela()">Dependentes</button>-->
<style>
    table {
        width: 100%;
        border-collapse: collapse;


    }

    .margem-topo {

        margin-top: 6%;
    }

    /* Zebra striping */
    tr:nth-of-type(odd) {
        background: #eee;
    }
    th {
        background: #207B96;
        color: white;
        font-weight: bold;
    }
    td, th {
        padding: 6px;
        border: 1px solid #ccc;
        text-align: left;
    }
    /*
        Max width before this PARTICULAR table gets nasty
        This query will take effect for any screen smaller than 760px
        and also iPads specifically.
        */
    @media only screen and (max-width: 760px) , ( min-device-width : 768px)
    and (max-device-width: 1024px) {
        /* Force table to not be like tables anymore */
        table,thead,tbody,th,td,tr {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        tr {
            border: 1px solid #ccc;
            text-align: center;
        }
        td {
            /* Behave  like a "row" */

            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }
        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        /*
            Label the data
            */
        td:nth-of-type(1):before {
            content: "#";
        }
        td:nth-of-type(2):before {
            content: "Nome";
        }
        td:nth-of-type(3):before {
            content: "Matrícula";
        }
        td:nth-of-type(4):before {
            content: "";
        }
        td:nth-of-type(5):before {
            content: "";
        }
        td:nth-of-type(6):before {
            content: "";
        }

    }

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width
    : 480px) {
        body {
            padding: 0;
            margin: 0;
            width: 320px;
        }
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width:
    1024px) {
        body {
            width: 495px;
        }
    }

</style>
<!--<![endif]-->

<meta charset="UTF-8"/>

<h3 class="text-center texto-titulo">Cadastro de Sócios</h3><br/><br/>

<form ng-submit="salvar()">
    <div class="form-group ">
      <label for="txtNome" >Nome Completo:</label>
        <input type="text" class="form-control input-lg" id="txtNome" maxlength="50" ng-model="socio.nome" placeholder="Nome Completo" required>
    </div>
    <div class="form-group">
        <label for="Numero">N° de inscrição:</label>
        <input type="text" class="form-control input-lg"  pattern="[0-9]+$"  ng-model="socio.numeroMatricula" id="numero" placeholder="N° de inscrição" required title="Digite apenas números">
    </div>


    <button class="btn btn-primary  btn-block">Salvar</button>

</form><br/><br/>

        <section ng-hide="esconder">

    <div id="page-wrap" class="margem-topo" >


        <input type="text" class="form-control input-lg" ng-model="search" placeholder="Faça sua busca"/><br/>
        <table>
            <thead>
            <tr>

                <th>#</th>
                <th>Nome</th>
                <th>Matrícula</th>
                <th></th>
                <th></th>
                <th></th>


            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="socio in socios | filter: search | orderBy: 'nome'">
                <td >{{$index + 1}}</td>
                <td>{{ socio.nome }}</td>
                <td>{{ socio.numero_matricula }}</td>
                <td><span  ng-click="editar(socio.id)"><img src="images/icons/pencil43.png" alt=""/></span></td>
                <td><span  ng-click="excluir(socio.id, socio.nome);" ><img src="images/icons/delete96.png" alt=""/></span></td>
                <td><span  ng-click="ver(socio.id)"><img src="images/icons/eye1099.png" alt=""/></span></td>

            </tr>


            </tbody>
        </table>

    </div>

        </section>


